<template>
    <div class="overall">
        <div class="rental_cart">
            <el-card class="cart_card">
                <div class="cart_title">
                    租赁商品
                </div>
                <el-table :data="rentalCarts" style="width: 100%">
                <el-table-column prop="rentalGoods.name" label="商品名称" width="120">
                </el-table-column>
                <el-table-column prop="rentalGoods.cat.catName" label="商品分类" width="120px" >
                </el-table-column>
                <el-table-column prop="img" label="商品图片" width="120">
                    <template slot-scope="scope">
                        <el-popover placement="top-start" title="" trigger="hover">
                            <img :src="scope.row.rentalGoods.url" alt="" style="width: 150px;height: 150px">
                            <img slot="reference" :src="scope.row.rentalGoods.url" style="width: 30px;height: 30px">
                        </el-popover>
                    </template>
                </el-table-column>
                <el-table-column prop="rentalGoods.leasePeriodDays" label="租赁周期（天）" width="120">
                </el-table-column>
                <el-table-column prop="rentalGoods.pricePerPeriod" label="每期价格（元）" width="120">
                    <template v-slot="scope">
                        <div class="price_tag">
                            ￥{{scope.row.rentalGoods.pricePerPeriod}}
                        </div>
                     </template>
                </el-table-column>
                <el-table-column prop="rentalGoods.pricePerPeriod" label="添加时间" width="230">
                    <template v-slot="scope">
                        {{scope.row.date | dateFormat}}
                     </template>
                </el-table-column>
                <el-table-column prop="" label="操作" width="250" >
                    <template v-slot="scope">
                        <!-- 按钮 -->

                        <button class="detail_btn " @click="gotoRentalDetail(scope.row.rentalGoods.strId)">详情</button>
                        <button class="pay_btn " @click="gotoRentalPay(scope.row.rentalGoods.strId)">付款</button>                        
                        <button  class="delete_btn" @click="removeRentalGoods(scope.row.strId)" >移除</button>
                    </template>
                </el-table-column>
            </el-table>
            </el-card>
        </div>
        <div class="share_cart">
            <el-card class="cart_card">
                <div class="cart_title">
                    共享商品
                </div>
                <el-table :data="shareCarts" style="width: 100%">
                <el-table-column prop="shareGoods.name" label="商品名称" width="120">
                </el-table-column>
                <el-table-column prop="shareGoods.cat.catName" label="商品分类" width="120px" >
                </el-table-column>
                <el-table-column prop="img" label="商品图片" width="120">
                    <template slot-scope="scope">
                        <el-popover placement="top-start" title="" trigger="hover">
                            <img :src="scope.row.shareGoods.url" alt="" style="width: 150px;height: 150px">
                            <img slot="reference" :src="scope.row.shareGoods.url" style="width: 30px;height: 30px">
                        </el-popover>
                    </template>
                </el-table-column>
                <el-table-column prop="shareGoods.moneyPerHour" label="价格(元/时)" width="120">
                     <template v-slot="scope">
                         <div class="price_tag">
                        ￥{{scope.row.shareGoods.moneyPerHour}}
                        </div>
                     </template>
                </el-table-column>
                <el-table-column prop="" label="添加时间" width="230">
                    <template v-slot="scope">
                        {{scope.row.date | dateFormat}}
                     </template>
                </el-table-column>
                <el-table-column prop="" label="操作" width="300" >
                    <template v-slot="scope">
                        <!-- 按钮 -->
                        <button class="position_btn" @click="showLocation(scope.row.shareGoods.addressX,scope.row.shareGoods.addressY)">位置</button>
                        <button class="detail_btn " @click="gotoshareDetail(scope.row.shareGoods.strId)">详情</button>
                        <button class="pay_btn " @click="gotosharePay(scope.row.shareGoods.strId)">付款</button>                        
                        <button  class="delete_btn" @click="removeshareGoods(scope.row.strId)" >移除</button>
                    </template>
                </el-table-column>
            </el-table>
            </el-card>
            <el-dialog :visible.sync="locationShow" destroy-on-close>
             <div id="location" ></div>
            </el-dialog>
        </div>
    </div>
</template>

<script>
export default {
    data(){
        return{
            locationShow:false,
            queryInfoR:{
                pagenum:1,
                pagesize:10,
                isSpc:true
            },
            queryInfoS:{
                pagenum:1,
                pagesize:10,
                isSpc:true
            },
            rentalCarts:[],
            shareCarts:[]
        }
    },
    methods:{
       async getRentalCart()
       {
           const {data:res}=await this.$http.get('/rent/RentalFavorite/findByUserID/1/'
           +this.queryInfoR.pagesize+'/'+this.queryInfoR.pagenum+'/'+this.queryInfoR.isSpc)
           console.log(res)
           this.rentalCarts=res.data.data;
       },
        gotoRentalDetail(id)
       {
           window.open('//' + window.location.host+window.location.pathname+ '/#/rentalDetail?Id=' + id)
       },
        gotoRentalPay(id)
       {
           window.open('//' + window.location.host +window.location.pathname+ '/#/rentalOrder?Id=' + id)
       },
       async removeRentalGoods(id)
       {
           const {data:res}=await this.$http.delete('rent/RentalFavorite/delete/'+id)
           console.log(res)
           if(res.code==200)
           {
               this.$message.success("移除成功!")
           }
           this.getRentalCart();
       },
       async getShareCart()
       {
           const {data:res}=await this.$http.get('/rent/ShareFavorite/findByUserID/1/'
           +this.queryInfoS.pagesize+'/'+this.queryInfoS.pagenum+'/'+this.queryInfoS.isSpc)
           console.log(res)
           this.shareCarts=res.data.data;
       },
        gotoshareDetail(id)
       {
           window.open('//' + window.location.host+window.location.pathname+ '/#/shareDetail?Id=' + id)
       },
        gotosharePay(id)
       {
           window.open('//' + window.location.host +window.location.pathname+ '/#/shareOrder?Id=' + id)
       },
       async removeshareGoods(id)
       {
           const {data:res}=await this.$http.delete('rent/ShareFavorite/delete/'+id)
           console.log(res)
           if(res.code==200)
           {
               this.$message.success("移除成功!")
           }
           this.getshareCart();
       },
       showLocation(x,y)
      {
        this.locationShow=!this.locationShow;
        var that=this;
        this.$nextTick(()=>{
        
            var position = document.getElementById("location");

            var center = new TMap.LatLng(x, y);//设置中心点坐标
            //初始化地图
            var map = new TMap.Map("location", {
                center: center
            });
            
            var marker = new TMap.MultiMarker({
            id: "marker-layer", //图层id
            map: map,
            styles: { //点标注的相关样式
                "marker": new TMap.MarkerStyle({
                    "width": 25,
                    "height": 35,
                    "anchor": { x: 16, y: 32 },
                    "src": "https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/markerDefault.png"
                })
            },
            geometries: [{ //点标注数据数组
                "id": "demo",
                "styleId": "marker",
                "position": new TMap.LatLng(x, y),
                "properties": {
                    "title": "marker"
                }
            }]
            
        });

        
        })
      }
    },
    created()
    {
        this.getRentalCart();
        this.getShareCart();
    }
}
</script>

<style lang="less" scoped>
/deep/.el-card__body
{
    padding:0;
}
.cart_card
{
    width:1200px;
    margin-bottom: 30px;
    margin-left:auto;
    margin-right: auto;;
    overflow: hidden;
    background: #fff;
    padding:0;
    border-radius: 8px;
    border: 1px solid #dcdcdc;
    border-color: rgba(0,0,0,.14);
    box-shadow: 0 3px 8px -6px rgb(0 0 0 / 10%);
    .cart_title
    {
        padding-left: 30px;
        position: relative;
        z-index: 10;
        height: 60px;
        padding: 0 10px 0 24px;
        border-bottom: 1px solid #d4d4d4;
        border-radius: 8px 8px 0 0;
        box-shadow: 0 1px 7px rgb(0 0 0 / 6%);
        background: #f3f3f3;
        background: linear-gradient(#fbfbfb,#ececec);
        line-height: 60px;
        font-size: 18px;
        color: #333;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
}
 .detail_btn,.pay_btn,.delete_btn,.position_btn
{
    width:60px;
    height:30px;
    margin-right: 10px;
    float: left;
    border-radius: 10px;
    border:none;
    cursor: pointer;
    transition: .5s;
    color: #fff;
    font-weight: 600;
    &:hover{
        transform: scale(1.1);
    }
 }
 .detail_btn
 {
     background-image: linear-gradient(to right, #4facfe 0%, #00f2fe 100%);
 }
 .pay_btn
 {
     background-image: linear-gradient(to right, #ed6ea0 0%, #ec8c69 100%);
 }
 .delete_btn
 {
     background-image: linear-gradient(to right, #e65c00 , #f9d423 );
 }
 .position_btn{
     background-image: linear-gradient(to right, #92fe9d 0%, #00c9ff 100%);
 }

</style>